<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
    <view class="title">手机号登录</view>
    <item title="手机号" column padding="40rpx 0">
        <wd-input v-model="obj.mobile" placeholder="请输入手机号" clearable />
    </item>
    <item title="验证码" column padding="0">
        <view class="code_box">
            <wd-input v-model="obj.code" placeholder="请输入验证码" clearable style="width:calc(100% - 220rpx);" />
            <view class="code" @click="send()">{{ timer }}</view>
        </view>
        <view class="tips">
            <view>首次登录会自动注册账号</view>
            <view @click="goHome()">回到首页<wd-icon name="arrow-right" size="28rpx" color="#999"></wd-icon></view>
        </view>
    </item>
    <item column padding="0">
        <view class="agreement">
            <view class="icon" :class="agree ? 'active' : ''" @click="agree = !agree"><wd-icon name="check-bold"
                    size="12" :color="agree ? 'white' : '#ccc'" /></view>
            我已阅读并同意<text>用户协议</text>和<text>隐私政策</text>
            <!-- TODO : 用户协议 隐私政策 -->
        </view>
        <bottom_button title="登录" :fixed="false" style="margin-top:60rpx;" @click="login()" />
    </item>
</template>

<script lang="ts" setup>
import { SmsCode } from '@/utils'
import { http } from '@/utils/http'
import { useStore } from '@/utils/store'
import { goTo } from '@/utils/url'
const store = useStore()
const obj = ref<any>({
    mobile: '',
    code: '',
    uuid: '',
})
const agree = ref(false)
const timer = ref('发送验证码')
function send() {
    SmsCode(obj.value.mobile, timer).then(res => {
        if (res.code == 200) obj.value.uuid = res.data.uuid
    })
}

function login() {
    let param = JSON.parse(JSON.stringify(obj.value))
    param.code = parseInt(param.code)
    if (!agree.value) return uni.showToast({ title: '请勾选同意用户协议和隐私政策', icon: 'none' })
    http.post('/member/mobile_login', param).then((res: any) => {
        uni.showToast({ title: res.message, icon: "none" })
        if (res.code == 200) {
            store.token = res.data
            store.setMemberData()
            setTimeout(() => {
                uni.navigateBack({ delta: 1 })
            }, 1200);
        }
    })
}

function goHome() {
    uni.showModal({
        content: '确定回到首页吗', success(res) {
            if (res.confirm) {
                goTo('/', true)
            }
        }
    })
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

page {
    padding: 30rpx;
    background: #fff;
}

.title {
    margin: 50rpx 0 30rpx;
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
}

.code_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code {
    width: 220rpx;
    margin-left: 20rpx;
    font-size: 28rpx;
    line-height: 35px;
    text-align: center;
    border: solid 1px #e5e5e5;
    border-radius: 10rpx;
}

.agreement {
    display: flex;
    align-items: flex-end;
    margin-top: 20rpx;
    color: #666;
}

.agreement text {
    color: #2979ff;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
    margin-bottom: 6rpx;
    border: solid 1px #ccc;
    border-radius: 6rpx;
}

.icon.active {
    color: white;
    background: #2979ff;
    border-style: none;
}

.tips {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
}
</style>